<template>
  <div class="dialog-form">
    <el-form ref="restrictedCodeConfigRef" :model="form" :rules="rules" label-width="110px">
      <el-form-item label="渠道名称" prop="channelCode">
        <el-select v-model="form.channelCode" placeholder="请选择渠道" :disabled="form.id">
          <el-option
            v-for="dict in channelList"
            :key="dict.channelCode"
            :label="dict.channelName"
            :value="dict.channelCode"
            :disabled="dict.enabled == 2"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="运营渠道" prop="businessChannel">
        <el-input v-model="form.businessChannel" placeholder="请输入运营渠道" />
      </el-form-item>
      <el-form-item label="阈值" prop="blackThreshold">
        <el-input v-model="form.blackThreshold" placeholder="请输入阈值" />
      </el-form-item> -->
      <el-form-item label="异常订单数量" prop="exOrderLimit">
        <el-input-number v-model="form.exOrderLimit" :min="1" :step="1" :precision="0" placeholder="请输入异常订单数量" />
      </el-form-item>
      <el-form-item label="储值最低余额" prop="balanceLimit">
        <div class="flex items-center flex-1">
          <el-input-number :min="0.01" :precision="2" v-model="form.balanceLimit" placeholder="请输入储值最低余额" />
          <p class="unit">元</p>
        </div>
      </el-form-item>
      <el-form-item label="状态" prop="enabled">
        <el-switch
          v-model="form.enabled"
          inline-prompt
          :active-value="1"
          :inactive-value="2"
          inactive-text="禁用"
          active-text="启用"
        />
        <!-- <el-select v-model="form.enabled" placeholder="请选择">
          <el-option
            v-for="dict in bus_enabled"
            :key="dict.value"
            :label="dict.label"
            :value="parseInt(dict.value)"
          ></el-option>
        </el-select> -->
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onConfirm">确认</el-button>
    </div>
  </div>
</template>

<script setup>
import { getRestrictedCodeConfig, addRestrictedCodeConfig, updateRestrictedCodeConfig } from "@/api/bus/restrictedCodeConfig"
import Big from 'big.js'

const { proxy } = getCurrentInstance()
const { bus_enabled } = proxy.useDict('bus_enabled')

const emits = defineEmits(['cancel', 'confirm'])
const props = defineProps(['channelList'])

const restrictedCodeConfigRef = ref()
const form = ref({
  id: null,
  channelCode: null,
  businessChannel: null,
  payType: null,
  blackThreshold: null,
  exOrderLimit: null,
  balanceLimit: null,
  enabled: 1,
  createTime: null,
  updateTime: null
})
const rules = {
  channelCode: [{ required: true, message: "渠道名称不能为空", trigger: "blur" }],
  exOrderLimit: [{ required: true, message: "异常订单数量不能为空", trigger: "blur" }],
  balanceLimit: [{ required: true, message: "储值最低余额不能为空", trigger: "blur" }],
  enabled: [{ required: true, message: "请选择生效状态", trigger: "blur" }],
}

const pageInit = (id) => {
  if (id) {
    getRestrictedCodeConfig(id).then(response => {
      const res = response.data
      form.value = {
        channelCode: res.channelCode,
        balanceLimit: new Big(res.balanceLimit).div(new Big(100)).toNumber(),
        exOrderLimit: res.exOrderLimit,
        enabled: res.enabled,
        id: res.id
      }
    })
  }
}

const onCancel = () => {
  emits('cancel')
}

const onConfirm = () => {
  const obj = props.channelList.find(item => {
    return item.channelCode == form.value.channelCode
  })
  if (obj) {
    form.value.channelName = obj.channelName
  }
  restrictedCodeConfigRef.value.validate(valid => {
    if (valid) {
      const params = {
        ...form.value,
        balanceLimit: new Big(form.value.balanceLimit).times(new Big(100)).toString()
      }
      if (form.value.id) {
        updateRestrictedCodeConfig(params).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          restrictedCodeConfigRef.value.resetFields()
          emits('confirm')
        })
      } else {
        addRestrictedCodeConfig(params).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          restrictedCodeConfigRef.value.resetFields()
          emits('confirm')
        })
      }
    }
  })
}

defineExpose({
  pageInit
})

</script>

<style lang="scss" scoped>
.unit {
  width: 32px;
  height: 32px;
  background-color: #f5f7fa;
  text-align: center;
  line-height: 32px;
  color: rgb(75, 75, 75);
  border-radius: 0 4px 4px 0;
  border-top: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  border-right: 1px solid #dcdfe6;
  margin-left: -1px;
}
</style>